<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理+搜索</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #721c24;
    }

    h1 {
      text-align: center;
      color: #333;
      margin: 20px 0;
    }

    table {
      margin: 0 auto;
      width: 800px;
      border-collapse: collapse;
      color: #004085;
    }

    th {
      padding: 10px;
      background: #cfe5ff;

      font-size: 20px;
      font-weight: 400;
    }

    td,
    th {
      border: 1px solid #b8daff;
    }

    td {
      padding: 10px;
      color: #666;
      text-align: center;
      font-size: 16px;
    }

    tbody tr {
      background: #fff;
    }

    tbody tr:hover {
      background: #e1ecf8;
    }

    .info {
      width: 900px;
      margin: 50px auto;
      text-align: center;
    }

    .info input,
    .info select {
      width: 80px;
      height: 27px;
      outline: none;
      border-radius: 5px;
      border: 1px solid #b8daff;
      padding-left: 5px;
      box-sizing: border-box;
      margin-right: 15px;
    }

    .info button {
      width: 60px;
      height: 27px;
      background-color: #004085;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
    }

    .info .age {
      width: 50px;
    }

    .tool {
      margin: 0 auto;
      width: 800px;
    }

    .tool input {
      margin: 0;
      padding: 0;
      width: 300px;
      height: 27px;
      outline: none;
      border-radius: 5px;
      border: 1px solid #b8daff;
      padding-left: 5px;
      box-sizing: border-box;
      margin-right: 15px;
    }

    .tool button {
      margin: 0;
      padding: 0;
      width: 60px;
      height: 27px;
      background-color: #004085;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <h1>搜索学员-（忽略本地存储 - 加上本地存储）</h1>
  <div class="tool">
    <input id="searchinput" type="text" />
    <button id="search">搜索</button>
  </div>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" /> 年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" /> 就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
    </tbody>
  </table>
  <script>
    const add = document.querySelector('.add'); // 录入 按钮
    const form = document.querySelector('.info'); // 表单
    const tbody = document.querySelector('tbody');
    const searchinput = document.querySelector('#searchinput');
    const search = document.querySelector('#search');

    // 定义一个空的数组
    // let arr = JSON.parse(localStorage.getItem('arr'));
    // // 判断 arr 有没有数据
    // if (!arr) {
    //   arr = [];
    // }
    // 定义一个空的数组
    let arr = JSON.parse(localStorage.getItem('arr')) || [];

    renderTable();

    search.addEventListener('click', function () {
      renderTable();
    });

    add.addEventListener('click', function () {
      const uname = document.querySelector('.uname').value.trim();
      const age = document.querySelector('.age').value.trim();
      const gender = document.querySelector('.gender').value.trim();
      const salary = document.querySelector('.salary').value.trim();
      const city = document.querySelector('.city').value.trim();

      // 把数据设置到数组中即可
      arr.push({
        uname: uname,
        age: age,
        gender: gender,
        salary: salary,
        city: city,
        id: Date.now(),
      });

      // 存一份到本地存储中
      localStorage.setItem('arr', JSON.stringify(arr));

      // 根据数组来生成html标签
      renderTable();

      form.reset(); // 重置
    });

    // 解决form标签刷新
    form.addEventListener('submit', function (event) {
      event.preventDefault();
    });

    // 点击删除功能
    tbody.addEventListener('click', function (event) {
      if (event.target.nodeName === 'A') {
        const index = event.target.dataset.index;
        arr.splice(index, 1);

        // 存一份到本地存储中
        localStorage.setItem('arr', JSON.stringify(arr));

        // 根据数组来生成html标签
        renderTable();
      }
    });

    // 根据数组来生成对应的html
    function renderTable() {
      let trHTML = ``;

      for (let index = 0; index < arr.length; index++) {
        if (arr[index].uname.indexOf(searchinput.value) === -1) {
          continue;
        }
        trHTML += `
      <tr>
          <td>${arr[index].id}</td>
          <td data-uname='${arr[index].uname}'>${arr[index].uname}</td>
          <td>${arr[index].age}</td>
          <td>${arr[index].gender}</td>
          <td>${arr[index].salary}</td>
          <td>${arr[index].city}</td>
          <td>
            <a data-index="${index}" href="javascript:">删除</a>
          </td>
        </tr> 
      `;
      }
      tbody.innerHTML = trHTML;
    }
  </script>
</body>

</html>